<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 响应式布局</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#">我在B站学前端</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav  ms-auto">
          <li class="list-group-item-action nav-item">
            <a class="nav-link" aria-current="page" href="#">前端知识</a>
          </li>
          <li class="list-group-item-action nav-item">
            <a class="nav-link" href="#">后端知识</a>
          </li>
          <li class="list-group-item-action nav-item">
            <a class="nav-link" href="#">数据库知识</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <section class="bg-dark p-5 text-light text-center text-sm-start"> <!-- padding 
      text-center 文字居中 
      text-sm-start 当页面大于等于 576px 文字就不再居中了，左对齐
    -->

    <div class="container">
      <div class="d-flex"> <!-- display: flex; -->
        <div class="left">
          <h1>成为一个<span class="text-warning">前端工程师</span></h1>
          <!-- my-4 => margin-top margin-bottom -->
          <!-- mx-4 => margin-left margin-right -->
          <p class="my-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eveniet dignissimos amet ex
            necessitatibus, dolores rerum impedit a, repudiandae voluptatum quis repellendus nemo officiis, quaerat
            ipsam nostrum culpa. Alias, molestias.
          </p>
          <button class="btn btn-primary btn-lg">开始编程之旅</button>
        </div>
        <!-- d-node 默认情况下不显示
              d-md-block 当页面大于等于992px 才会显示
          -->
        <img class="w-50 d-none d-md-block" src="./img/showcase.svg" alt="">
      </div>
    </div>
  </section>

  <search class="p-5 bg-primary text-light">
    <div class="container">
      <div class="d-md-flex justify-content-between align-items-center">
        <h3 class="mb-3">现在注册账号开始变成编程之旅</h3>
        <div class="input-group news-input">
          <input type="text" class="form-control" placeholder="请输入你的邮箱">
          <button class="btn btn-dark btn-lg ">注册</button>
        </div>
      </div>
    </div>
  </search>

  <subject class="p-5">
    <div class="container">
      <div class="row g-4"> <!-- gay间距 -->
        <div class="col-md-4">
          <div class="card bg-dark text-light">
            <div class="card-body text-center">
              <h5 class="card-title">前端知识</h5>
              <p class="card-text text-center">Some quick example text to build on the card title and make up the bulk
                of the card's content.</p>
              <a href="#" class="btn btn-primary mt-2">学习前端</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card bg-secondary text-light">
            <div class="card-body text-center">
              <h5 class="card-title">后端知识</h5>
              <p class="card-text text-center">Some quick example text to build on the card title and make up the bulk
                of the card's content.</p>
              <a href="#" class="btn btn-primary mt-2">学习后端</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card bg-dark text-light">
            <div class="card-body text-center">
              <h5 class="card-title">数据库知识</h5>
              <p class="card-text text-center">Some quick example text to build on the card title and make up the bulk
                of the card's content.</p>
              <a href="#" class="btn btn-primary mt-2">学习数据库</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </subject>

  <section class="p-5">
    <div class="container">
      <div class="row align-items-center justify-content-between">
        <div class="col-md-6">
          <img src="./img/1.svg" class="img-fluid" alt="">
        </div>
        <div class="col-md-6 p-5">
          <h2 class="h2">课程介绍</h2>
          <p class="lead py-3">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio ullam vero voluptatem nisi aliquam nemo quae
            veniam, facilis distinctio. Assumenda accusamus nesciunt aspernatur eligendi voluptates unde officia
            mollitia eum quidem.
          </p>
          <p class="h5 pb-3">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure explicabo autem inventore sit similique ea
            placeat suscipit vero architecto, blanditiis sapiente quasi in eaque aperiam cumque maiores? Possimus,
            placeat sit!
          </p>
          <a href="#" class="btn btn-success">查看更多</a>
        </div>
      </div>
    </div>
  </section>

  <section class="p-5 bg-dark text-light">
    <div class="container">
      <div class="row align-items-center justify-content-between">
        <div class="col-md-6 p-5">
          <h2 class="h2">课程介绍</h2>
          <p class="lead py-3">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio ullam vero voluptatem nisi aliquam nemo quae
            veniam, facilis distinctio. Assumenda accusamus nesciunt aspernatur eligendi voluptates unde officia
            mollitia eum quidem.
          </p>
          <p class="h5 pb-3">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure explicabo autem inventore sit similique ea
            placeat suscipit vero architecto, blanditiis sapiente quasi in eaque aperiam cumque maiores? Possimus,
            placeat sit!
          </p>
          <a href="#" class="btn btn-success">查看更多</a>
        </div>
        <div class="col-md-6">
          <img src="./img/2.svg" class="w-100" alt="">
        </div>
      </div>
    </div>
  </section>

  <section class="p-5">
    <div class="container">
      <h2 class="text-center">常见问题</h2>
      <div class="accordion accordion-flush" id="accordionFlushExample">
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
              Accordion Item #1
            </button>
          </h2>
          <div id="flush-collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the
              <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
              Accordion Item #2
            </button>
          </h2>
          <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the
              <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being
              filled with some actual content.</div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
              Accordion Item #3
            </button>
          </h2>
          <div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the
              <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting
              happening here in terms of content, but just filling up the space to make it look, at least at first
              glance, a bit more representative of how this would look in a real-world application.</div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="p-5 bg-primary">
    <div class="container">
      <h2 class="text-center text-light">讲师介绍</h2>
      <p class="lead text-center text-white mb-5">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
        Hic, unde?
      </p>
      <div class="row g-4">
        <div class="col-md-6 col-lg-3">
          <div class="card bg-light">
            <div class="card-body text-center">
              <img src="img/01-man.jpeg" class="mb-3 rounded-circle" />
              <h3 class="card-title">张三</h3>
              <p class="card-text">
                Lorem ipsum dolor sit amet consectetur
                adipisicing elit. Accusamus, ratione!
              </p>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-lg-3">
          <div class="card bg-light">
            <div class="card-body text-center">
              <img src="img/02-man.jpeg" class="mb-3 rounded-circle" />
              <h3 class="card-title">张三</h3>
              <p class="card-text">
                Lorem ipsum dolor sit amet consectetur
                adipisicing elit. Accusamus, ratione!
              </p>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-lg-3">
          <div class="card bg-light">
            <div class="card-body text-center">
              <img src="img/03-man.jpeg" class="mb-3 rounded-circle" />
              <h3 class="card-title">张三</h3>
              <p class="card-text">
                Lorem ipsum dolor sit amet consectetur
                adipisicing elit. Accusamus, ratione!
              </p>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-lg-3">
          <div class="card bg-light">
            <div class="card-body text-center">
              <img src="img/04-man.jpeg" class="mb-3 rounded-circle" />
              <h3 class="card-title">张三</h3>
              <p class="card-text">
                Lorem ipsum dolor sit amet consectetur
                adipisicing elit. Accusamus, ratione!
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="p-5">
    <div class="container">
      <h2 class="text-center mb-4">联系我们</h2>

      <ul class="list-group list-group-flush">
        <li class="list-group-item">电话：120XXXXXX</li>
        <li class="list-group-item">邮箱： bilibil@bili.com</li>
        <li class="list-group-item">地址：上海市XXXX区</li>
      </ul>
    </div>
  </section>

  <footer class="p-5 bg-dark text-white text-center">
    <div class="container">
      <p class="lead">Copyright &copy; 2024 我在b站学bootstrap5</p>
    </div>
  </footer>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>
</body>

</html>